<template>
  <div class="data-operation">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="商品信息" />
      <el-step title="商品详情" />
      <el-step title="其他设置" />
    </el-steps>
  </div>
  <el-form :model="form" label-width="120px" v-if="active === 0">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
  </el-form>
  <div class="info" v-if="active === 2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quaerat
    quibusdam autem, adipisci veritatis iure nisi iste eligendi ratione
    blanditiis fugit sapiente atque. Officiis obcaecati quaerat dicta voluptatem
    a aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
    mollitia dolorem quaerat, voluptas asperiores eaque ut beatae explicabo,
    dignissimos minus hic repellat sunt nobis nesciunt accusamus quasi ab quae
    laudantium?
  </div>
  <el-button type="primary" class="next-btn" @click="nextStep"
    >下一步</el-button
  >
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const active = ref(0);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const nextStep = () => {
  if (active.value++ > 2) active.value = 0;
};
</script>

<style scoped lang="scss">
.data-operation {
  padding: 20px;
  border-bottom: 1px solid rgb(225, 222, 222);
  .el-steps {
    width: 100%;
  }
}
.el-form {
  font-size: 12px;
  padding: 20px;
}
.info {
  font-size: 30px;
  padding: 20px;
}
.next-btn {
  margin-bottom: 30px;
  margin-left: 10%;
}
</style>
